#{extends 'main.html' /}
#{set title:'Home'/}
#{set 'moreScripts'}
<script type="text/javascript">
var products = {};
#{list items:products,as:'p'}
products[${p.id}] = {bigimage:'${play.configuration['attachments.download.prefix']+p.homepageBigImage}',
					link:'@{overview(p.id)}'};

#{/list}

$(function(){
	$(".featuredIcon img").mouseover(function(){
		var id=this.id;
		$("#bigImage").attr("src",products[id].bigimage);
		$("#bigImage").click(function(){
			document.location = products[id].link;
		});
	}).click(function(){
		document.location = products[this.id].link;
	});
	
	
});
</script>
#{/set}

<table cellpadding="0" cellspacing="0" border="0" class="mainContent" align="center">
	<tr>
		<td width="308" valign="top">
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td class="featuredTitle"></td>
				</tr>
				<tr>
					<td align="center">
					<table cellspacing="5" cellpadding="0" class="featuredIcon">
						#{list items:products,as:'p'}
						<tr>
							<td>
								<img src="${play.configuration['attachments.download.prefix']+p.homepageSmallImage}" id="${p.id}" style="cursor:hand;cursor:pointer;"></img>
							</td>
						</tr>
						#{/list}
						
					</table>
					
					</td>
				</tr>
			</table>
		</td>
		<td class="right">
				<img src="${play.configuration['attachments.download.prefix']+products[0]?.homepageBigImage}" id="bigImage" onload="if(this.width>630)this.width=630" style="cursor:hand;cursor:pointer;"></img>
		</td>
	</tr>
	<tr>
		<td class="bottom" colspan="2"></td>
	</tr>
</table>
